<!-- start nav -->
<nav class="navbar navbar-default navbar-inverse" style="margin-bottom: 0; ">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/">
                <div class="food_icon">
                    <img alt="Brand" src="/public/images/other/icon/food.png">
                </div>

            </a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

            <!-- 右侧导航 -->
            <ul class="nav navbar-nav navbar-right">
                <!-- <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                        aria-expanded="false">更多 <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="/">首页</a></li>
                        <li><a href="/menu">菜单</a></li>


                        <li><a href="/cart">购物车</a></li>
                        <li><a href="/menuList">热门美食展示</a></li>
                    </ul>
                </li> -->
                <li><a href="/">首页</a></li>
                <li><a href="/menu">菜单</a></li>


                <li><a href="/cart">购物车</a></li>
                <li><a href="/menuList">热门美食展示</a></li>

                {{ if user }}
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                        aria-expanded="false"><img width="20" height="20" src="{{ user.avatar }}" alt=""> <span
                            class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li class="dropdown-current-user">
                            当前登录用户: {{ user.nickname }}
                        </li>
                        <li role="separator" class="divider"></li>

                        <li class="dropdown-current-user user_tableId">
                            {{ if user.occupiedMsg.tableId == '' }}
                            当前没有占用桌子
                        </li>
                        <li role="separator" class="divider"></li>
                        {{ else }}
                        <span class="tips">
                            当前占用的桌号: {{ user.occupiedMsg.tableId }}
                        </span>
                        <li role="separator" class="divider"></li>
                        <li>
                            <a href="javascript:;" class="cancel" onclick="oc(this)"
                                value="{{ user.occupiedMsg.tableId }}">取消占位</a>
                        </li>
                        <li role="separator" class="divider"></li>
                        {{ /if }}

                </li>
                <li><a href="/about/me">个人主页</a></li>
                <!-- /occupied/cancel?tableId={{ user.occupiedMsg.tableId }} -->


                <li><a href="/logout">退出</a></li>
            </ul>
            </li>
            {{ else }}
            <li><a href="/register">注册</a></li>
            <button type="button" class="btn btn-default navbar-btn btn-primary" data-toggle="modal"
                data-target="#login_myModal">登录</button>
            {{ /if }}



            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
<!-- end nav -->

<!-- start login Modal -->
<div class="modal fade" id="login_myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">登录</h4>
            </div>
            <div class="modal-body">
                <form action="/login" method="post" id="login_form">
                    <div class="form-group">
                        <label for="exampleInputEmail1">电子邮箱</label>
                        <input class="form-control" id="exampleInputEmail1" type="email"
                            placeholder="please enter your email" name="email">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">密码</label>
                        <input type="password" class="form-control" id="exampleInputPassword1"
                            placeholder="please enter your password" name="password">
                    </div>

                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">提交</button>
                    </div>
                </form>
            </div>

        </div>
    </div>
</div>
<!-- end login Modal -->


<script src="/node_modules/jquery/dist/jquery.min.js"></script>

<script>
    $('#login_form').on('submit', function (e) {
        e.preventDefault()
        var formData = $(this).serialize()
        // console.log(formData)
        $.ajax({
            url: '/login',
            type: 'post',
            data: formData,
            dataType: 'json',
            success: function (data) {
                var err_code = data.err_code
                if (err_code === 0) {
                    window.location.href = '/';
                } else if (err_code === 1) {
                    window.alert('邮箱或者密码错误')
                } else if (err_code === 500) {
                    window.alert('服务器忙，请稍后重试！')
                }
            }
        })
    })

    var tips = document.querySelector(".tips");

    function oc(obj) {
        var tableId = $(obj).attr("value")
        console.log(tableId);
        if (tableId != '') {
            $.ajax({
                type: "post",
                url: "/occupied/cancel",
                data: {
                    tableId: tableId
                },
                dataType: "json",
                success: function (data) {
                    var err_code = data.err_code;
                    if (err_code === 0) {
                        window.alert(data.message);
                        // 服务端重定向针对异步请求无效
                        window.location.href = '/';
                        // tips.innerHTML = '当前没有占用桌子';
                    } else if (err_code === 500) {
                        window.alert(data.message)
                    }
                }
            });
        }
    }




</script>